<template>
    <div class="app-container">
        <div class="filter-container">
            <div class="operator-container">
                <el-button icon="el-icon-plus" type="primary" @click="addActives('ad')" size="small">新增活动</el-button>
            </div>
            <el-dialog
                title="活动时间"
                :visible.sync="dialogVisibles"
                width="400px"
                :before-close="handleCloses">
                <div class="editGoodsGounp">
                  <el-form :rules="adDialogRules" ref="ad" :model="ad" label-position="right" label-width="100px" class="demo-ruleForm" style='width: 100%;'>
                    <el-form-item :label="adDialogTitles.name" prop="name">
                      <div style="width:220px;"><el-input v-model="ad.name" size="medium" placeholder="请输入名称"></el-input></div>
                    </el-form-item>
                    <el-form-item :label="adDialogTitles.dateSet" prop="dateSet">
                        <el-date-picker size="medium" v-model="ad.dateSet" dateType="time" placeholder="请输入活动时间" :picker-options="pickerOptions" value-format="timestamp">
                        </el-date-picker>
                    </el-form-item>
                  </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button size="small" @click="resetForm(ad)">取 消</el-button>
                    <el-button size="small" type="primary" @click="makeSure(ad)">确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog
                title="活动时段"
                :visible.sync="dialogVisible"
                width="400px"
                :before-close="handleClose">
                <div class="editGoodsGounp">
                  <el-form :rules="adDialogRule" ref="timeSlot" :model="timeSlot" label-position="right" label-width="100px" class="demo-ruleForm" style='width: 100%;'>
                    <el-form-item :label="adDialogTitle.beginTime" prop="beginTime">
                      <div style="width:220px;">
                        <el-time-picker
                          dateType="time"
                          format="HH:mm"
                          value-format="HH:mm"
                          v-model="timeSlot.beginTime"
                          placeholder="请输入开始时间">
                        </el-time-picker>
                      </div>
                    </el-form-item>
                    <el-form-item :label="adDialogTitle.endTime" prop="endTime">
                        <el-time-picker
                          dateType="time"
                          format="HH:mm"
                          value-format="HH:mm"
                          v-model="timeSlot.endTime"
                          placeholder="请输入开始时间">
                        </el-time-picker>
                    </el-form-item>
                  </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button size="small" @click="reset(timeSlot)">取 消</el-button>
                  <el-button size="small" type="primary" @click="submit(timeSlot)">确 定</el-button>
                </span>
            </el-dialog>
            <article>
              <el-table border :data="dataList">
                <el-table-column type="expand" v-if="columns">
                  <template slot-scope="props">
                    <div v-for="(item,index) of props.row.dailyTimePriceList" :key="index" inline class="demo-table-expand">
                      <div class="timePk">
                        <span>开始时间：{{ item.beginTime }}</span>
                        <span style="float:right">结束时间：{{ item.endTime }}</span>
                      </div>
                      <div class="operation">
                        <el-button plain type="primary" size="mini" @click="toDditProducts(index,props.row)">编辑</el-button>
                        <el-button plain type="primary" size="mini" @click="toLinkGdOperatione(index,props.row)">商品管理</el-button>
                        <el-button plain type="danger" size="mini" @click="toDeleteTime(props.row,index)">删除</el-button>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" align="center" width="150px" >
                </el-table-column>
                <el-table-column label="活动时间" align="center" min-width="200px">
                  <template slot-scope="scope">
                    <span>{{scope.row.dateSet}}</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="400px">
                    <template slot-scope="scope">
                        <!-- <el-button plain type="primary" size="mini" @click="toDditProduct(scope.row)">编辑</el-button> -->
                        <el-button plain type="primary" size="mini" @click="addTimes(scope.row,scope.row.$index,timeSlot)">添加时段</el-button>
                        <el-button plain type="danger" size="mini" @click="toDeleteActive(scope.row,scope.row.$index)">删除</el-button>
                    </template>
                </el-table-column>
              </el-table>
              <list-pagination :total="total" :page="page" :pageSize="pageSize" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange"></list-pagination>
            </article>
        </div>
    </div>
</template>
<script>
import list from '@/mixins/List'
import listPagination from '@/components/ListPagination'
import {
  dailyTimePricePage, setDaily, setDailyTime, doDeleteDailySet, doDeleteDailyTime
} from '@/api/specialOffer'
export default {
  name: 'screenAdList',
  mixins: [list],
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      dataList: [],
      imgList: [],
      dateSet: '',
      uploadFileUrl: `${process.env.BASE_API}/img/upload`,
      dialogVisibles: false,
      dialogVisible: false,
      dialogVisibleDelete: false,
      productsOperate: {},
      columns: [],
      column: [],
      toDeleteId: '',
      operationMsg: '',
      timeLimit: '',
      ad: {
        name: '',
        dateSet: ''
      },
      adDialogTitles: {
        name: '名称：',
        dateSet: '活动时间：'
      },
      adDialogTitle: {
        beginTime: '开始时间：',
        endTime: '结束时间：'
      },
      timeSlot: {
        beginTime: '',
        endTime: '',
        id: ''
      },
      adDialogRule: {
        beginTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
        endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }]
      },
      adDialogRules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'change' }],
        dateSet: [{ required: true, message: '活动时间不能为空', trigger: 'change' }]
      }
    }
  },
  components: {
    listPagination
  },
  watch: {

  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () { // 列表
      let { data } = await dailyTimePricePage({
        pageNum: this.page,
        pageSize: this.pageSize
      })
      for (let item of data.list) {
        item.dateSet = item.dateSet.slice(0, 10)
        this.columns.push(item.dailyTimePriceList)
        for (var items of item.dailyTimePriceList) {
          items.beginTime = items.beginTime.slice(11, 16)
          items.endTime = items.endTime.slice(11, 16)
        }
      }
      this.dataList = data.list
      this.total = this.dataList.length
    },
    addActives (ad) {
      this.ad = {}
      if (this.$refs[ad] !== undefined) {
        this.$refs[ad].resetFields()
      }
      this.dialogVisibles = true
    },
    release () {

    },
    /* 日期操作 */
    toDditProduct (row) {
      this.ad.name = row.name
      this.ad.id = row.id
      let temp = Math.floor(new Date(row.dateSet).getTime())
      this.ad.dateSet = temp
      this.dialogVisibles = true
    },
    resetForm (ad) {
      this.ad = {}
      this.$refs['ad'].resetFields()
      this.dialogVisibles = false
    },
    makeSure (ad) {
      this.timeLimit = this.ad.dateSet
      this.$refs['ad'].validate((valid) => {
        if (valid) {
          // this.ad.dateSet = this.timeLimit / 1000
          setDaily({
            id: this.ad.id,
            name: this.ad.name,
            dateSet: this.timeLimit / 1000
          }).then(res => {
            if (res.code === 200) {
              this.dialogVisibles = false
              this.$message.success('操作成功')
              this.getList()
            }
          })
        }
      })
    },
    /* 时间段操作 */
    toDditProducts (index, row) {
      this.dateSet = row.dateSet
      this.timeSlot.beginTime = row.dailyTimePriceList[index].beginTime
      this.timeSlot.endTime = row.dailyTimePriceList[index].endTime
      this.timeSlot.parentId = row.id
      this.timeSlot.id = row.dailyTimePriceList[index].id
      console.log(row.dailyTimePriceList[index].id, this.timeSlot.id)
      this.dialogVisible = true
    },
    reset (timeSlot) {
      this.timeSlot = {}
      this.$refs['timeSlot'].resetFields()
      this.dialogVisible = false
    },
    addTimes (row, timeSlot) {
      this.timeSlot = {}
      if (this.$refs['timeSlot'] !== undefined) {
        this.$refs['timeSlot'].resetFields()
      }
      this.timeSlot.parentId = row.id
      this.dateSet = row.dateSet
      this.dialogVisible = true
    },
    submit (timeSlot) {
      var datesetTime = this.dateSet.replace('-', '/').replace('-', '/')
      console.log(datesetTime)
      var timestamp1 = Date.parse(new Date(datesetTime + ' ' + this.timeSlot.beginTime))
      timestamp1 = timestamp1 / 1000
      var timestamp2 = Date.parse(new Date(datesetTime + ' ' + this.timeSlot.endTime))
      timestamp2 = timestamp2 / 1000
      // this.timeSlot.beginTime = timestamp1
      // this.timeSlot.endTime = timestamp2
      this.$refs['timeSlot'].validate((valid) => {
        if (valid) {
          setDailyTime({
            id: this.timeSlot.id,
            parentId: this.timeSlot.parentId,
            beginTime: timestamp1,
            endTime: timestamp2
          }).then(res => {
            if (res.code === 200) {
              this.getList()
              this.dialogVisible = false
              this.$message.success('操作成功')
              // window.location.reload()
            }
          })
        }
      })
    },
    // 删除活动时间
    toDeleteActive (row) {
      this.toDeleteId = row.id
      this.$confirm('此操作将永久删除该时间, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doDeleteDailySet({ 'id': this.toDeleteId }).then(res => {
          if (res.code === 200) {
            this.getList()
            this.dialogVisibleDelete = false
            this.$message.success('删除成功')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除时段
    toDeleteTime (row, index) {
      this.toDeleteId = row.dailyTimePriceList[index].id
      this.$confirm('此操作将永久删除该时间段, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doDeleteDailyTime({ 'id': this.toDeleteId }).then(res => {
          if (res.code === 200) {
            this.getList()
            this.dialogVisibleDelete = false
            this.$message.success('删除成功')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    toLinkGdOperatione (index, row) {
      this.$router.push({
        path: 'goodOperations',
        query: {
          operateId: row.dailyTimePriceList[index].id
        }
      })
    },
    toAddAdvertisement () {
      this.fatheraddAdvertiseman = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    handleCloses () {
      this.dialogVisibles = false
    }
  }
}
</script>
<style lang="scss" scoped>
    header{
        width: 100%;
        height: 60px;
        padding: 12px 0;
    }
    .editGoodsGounps {
      width: 100%;
      height: 80px;
      line-height: 60px;
      padding: 20px 0;

    }
    .editGoodsGounp {
      width: 100%;
      height: auto;
      line-height: 60px;
      padding: 20px 0;

    }
    .demo-table-expand {
      width: 100%;
      height: 60px;
      line-height: 36px;
      padding-left: 198px;
      display: flex;
      .timePk{
        flex: 1;
        padding:8px 48px;
        border:1px solid #ebeef5;
        span:nth-child(1){
          width: 50%;
          height: 60px;
          display: inline-block;
          border-right:1px solid #ebeef5
        }
      }
      .operation {
        width: 400px;
        height: 60px;
        padding:8px 50px;
        float: right
      }
    }
</style>
